function MostrarGrafica(strTipo, strIdContenedor, strDatos, strCategorias, strNombreGrafica, strTipoStack) {
  switch(strTipo) {
    case "stacked_column":
      graficar_comun('column', strIdContenedor, strDatos, strCategorias, strNombreGrafica, strTipoStack);
      break;
      
    case "stacked_area":
      graficar_comun('area', strIdContenedor, strDatos, strCategorias, strNombreGrafica, strTipoStack);
      break;
      
    case "spline":
      graficar_comun('spline', strIdContenedor, strDatos, strCategorias, strNombreGrafica, strTipoStack);
      break;
      
    case "double_pie":
      graficar_pie  ('pie'   , strIdContenedor, strDatos, strCategorias, strNombreGrafica, strTipoStack);
      break;
  }
}

function graficar_comun(strTipoGrafica, strIdContenedor, strDatos, strCategorias, strNombreGrafica, strTipoStack) {
  eval("arrCategorias = " + strCategorias + ";");
  eval("arrSeries     = " + strDatos + ";");
  
  if(undefined    === strTipoStack) { strTipoStack = "normal"; }
  if(strTipoStack === ""          ) { strTipoStack = "normal"; }
  if(strTipoStack === "nostack"   ) { strTipoStack = ""      ; }
  
  if(undefined === strNombreGrafica) {
    strNombreGrafica = "Grafica";
  }
  
  if(arrCategorias.length > 5) {
    intRotacion = -45;
  } else {
    intRotacion = 0;
  }
  
  if(arrCategorias.length > 5) {
    intRotacion     = -45;
    bolMostrarDatos = false;
  } else {
    intRotacion     = 0;
    bolMostrarDatos = true;
  }
  
  $('#' + strIdContenedor).highcharts({
    chart: {
      type: strTipoGrafica
    },
    title: {
      text: strNombreGrafica
    },
    xAxis: {
      categories: arrCategorias,
      labels: {
        rotation: intRotacion,
        align: 'right',
        style: {
          fontSize: '10px',
          fontFamily: 'Verdana, sans-serif'
        }
      }
    },
    yAxis: {
      min: 0,
      title: {
        text: ''
      },
      stackLabels: {
        enabled: bolMostrarDatos,
        style: {
          fontWeight: 'bold',
          color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
        }
      }
    },
    tooltip: {
      formatter: function() {
        return '<b>'+ this.x +'</b><br/>'+
          this.series.name +': '+ this.y +'<br/>'+
          'Total: '+ this.point.stackTotal;
      }
    },
    credits: {
      href:'http://escolares.zaragoza.unam.mx',
      text: 'Servicios Escolares - FES Zaragoza'
    },
    plotOptions: {
      series: {
        events: {
          click: function(e) {
            if(undefined !== e.point.options.url) {
              window.open(e.point.options.url);
            }
          }
        }
      },
      column: {
        stacking: strTipoStack,
        dataLabels: {
          enabled: bolMostrarDatos,
          color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
        }
      },
      area: {
        stacking: strTipoStack,
        dataLabels: {
          enabled: bolMostrarDatos,
          color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
        }
      }
    },
    series: arrSeries
  });
}


function graficar_pie(strTipo, strIdContenedor, strDatos1, strDatos2, strNombreGrafica, strTipoStack) {
  colors = Highcharts.getOptions().colors;
  
  eval("arrSeries1 = " + strDatos1 + ";");
  eval("arrSeries2 = " + strDatos2 + ";");
  
  if(undefined    === strTipoStack) { strTipoStack = "normal"; }
  if(strTipoStack === ""          ) { strTipoStack = "normal"; }
  if(strTipoStack === "nostack"   ) { strTipoStack = ""      ; }
  
  if(undefined === strNombreGrafica) {
    strNombreGrafica = "Grafica";
  }
  
  $('#' + strIdContenedor).highcharts({
    chart: {
      type: strTipo
    },
    title: {
      text: strNombreGrafica
    },
    plotOptions: {
      pie: {
        stacking: strTipoStack,
      },
      series: {
        events: {
          click: function(e) {
            if(undefined !== e.point.options.url) {
              alert(e.point.options.url);
//              window.open(e.point.options.url);
            }
          }
        }
      },
      pie: {
        shadow: false,
//        borderColor: "#bbbbbb",
//        borderWidth: 1,
        center: ['50%', '50%']
      }
    },
    series: [{
      name: 'Total',
      data: arrSeries1,
      size: '50%',
      dataLabels: {
        formatter: function() {
          return this.y > 5 ? this.point.name : null;
        },
        color: 'white',
        distance: -30
      }
    }, {
      name: 'Total',
      data: arrSeries2,
      size: '80%',
      innerSize: '50%',
      dataLabels: {
      }
    }]
  });
}